{% extends "base.html" %}

{% block meta %}
    <meta name="menu-tag" content="52"/>
{% end block %}

{% block main %}
<div class="container">
    <h3>所有运行的容器服务：</h3>
    <hr/>
    
    <table id='tbl' class='table table-striped'>
        <thead>
            <tr>
                <td>容器名称</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody data-bind="foreach:containers">
            <tr>
                <td data-bind="text:serviceName"></td>
                <td>
                    <button class="btn btn-sm btn-warning" data-bind="click:$root.stopService">停止</button>
                </td>
            </tr>            
        </tbody>
    </table>
</div>

{% end block %}


{% block script %}
<script type="text/javascript">
    function Service(serviceName){
        this.serviceName = serviceName;
    }

    function ViewModel(services){
        var self = this;
        self.containers = ko.observableArray(services);

        self.stopService = function(){
            container = this;
            bootbox.confirm('确实要停止容器服务【' + container.serviceName + '】吗？', function(choice){
                if (choice){
                    $.ajax({
                        url :  '/account_container?container=' + container.serviceName,
                        type : 'delete',
                        dataType: 'json',
                        success : function(result){
                            self.containers.remove(container);
                        }
                    });
                }
            });
        };
    }

    var services = [];

    {% for container in containers %}
        services.push(new Service('{{container}}'));
    {% end for %}

    var viewModel = new ViewModel(services);
    ko.applyBindings(viewModel, document.getElementById('tbl'));
</script>
{% end block %}
